<template>
  <div class="status-history-panel">
    <a-card title="状态变更历史" size="small">
      <template #extra>
        <a-space>
          <a-select
            v-model:value="selectedStatusType"
            placeholder="选择状态类型"
            style="width: 120px"
            @change="filterHistory"
          >
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="LIFECYCLE">生命周期</a-select-option>
            <a-select-option value="AVAILABILITY">可用性</a-select-option>
            <a-select-option value="VERSION">版本</a-select-option>
            <a-select-option value="CUSTOM">自定义</a-select-option>
          </a-select>
          <a-date-picker
            v-model:value="dateRange"
            range
            placeholder="选择时间范围"
            @change="filterHistory"
          />
          <a-button type="primary" size="small" @click="exportHistory">
            <template #icon>
              <IconifyIcon icon="ant-design:download-outlined" />
            </template>
            导出
          </a-button>
        </a-space>
      </template>

      <a-timeline>
        <a-timeline-item
          v-for="history in filteredHistory"
          :key="history.id"
          :color="getHistoryColor(history.statusType)"
        >
          <div class="history-item">
            <div class="history-header">
              <span class="history-type">{{
                getHistoryTypeLabel(history.statusType)
              }}</span>
              <span class="history-time">{{
                formatTime(history.timestamp)
              }}</span>
            </div>
            <div class="history-content">
              <a-tag size="small">{{ history.oldStatus }}</a-tag>
              <IconifyIcon icon="ant-design:arrow-right-outlined" />
              <a-tag size="small" color="blue">{{ history.newStatus }}</a-tag>
            </div>
            <div v-if="history.reason" class="history-reason">
              原因：{{ history.reason }}
            </div>
            <div class="history-operator">操作者：{{ history.operator }}</div>
          </div>
        </a-timeline-item>
      </a-timeline>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <a-pagination
          v-model:current="pagination.current"
          v-model:page-size="pagination.pageSize"
          :total="pagination.total"
          :show-size-changer="true"
          :show-quick-jumper="true"
          @change="handlePageChange"
          @show-size-change="handlePageSizeChange"
        />
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { IconifyIcon } from '@vben/icons';

// Props
interface Props {
  resourceId: string;
  statusTypes: string[];
}

const props = defineProps<Props>();

// 响应式数据
const selectedStatusType = ref('');
const dateRange = ref<any>(null);

// 分页
const pagination = reactive({
  current: 1,
  pageSize: 20,
  total: 0,
});

// 状态历史数据
const statusHistory = ref([
  {
    id: '1',
    statusType: 'LIFECYCLE',
    oldStatus: 'DRAFT',
    newStatus: 'ACTIVE',
    reason: '资源初始化完成',
    operator: 'admin',
    timestamp: new Date(Date.now() - 86400000),
  },
  {
    id: '2',
    statusType: 'AVAILABILITY',
    oldStatus: 'UNAVAILABLE',
    newStatus: 'AVAILABLE',
    reason: '系统维护完成',
    operator: 'system',
    timestamp: new Date(Date.now() - 3600000),
  },
  {
    id: '3',
    statusType: 'CUSTOM',
    oldStatus: 'PENDING_REVIEW',
    newStatus: 'APPROVED',
    reason: '审核通过',
    operator: 'admin',
    timestamp: new Date(Date.now() - 1800000),
  },
  {
    id: '4',
    statusType: 'VERSION',
    oldStatus: 'DRAFT',
    newStatus: 'ACTIVE',
    reason: '版本发布',
    operator: 'admin',
    timestamp: new Date(Date.now() - 900000),
  },
]);

// 计算属性
const filteredHistory = computed(() => {
  let filtered = statusHistory.value;

  // 按状态类型过滤
  if (selectedStatusType.value) {
    filtered = filtered.filter(
      (item) => item.statusType === selectedStatusType.value,
    );
  }

  // 按时间范围过滤
  if (dateRange.value && dateRange.value.length === 2) {
    const startDate = dateRange.value[0].startOf('day');
    const endDate = dateRange.value[1].endOf('day');
    filtered = filtered.filter((item) => {
      const itemDate = new Date(item.timestamp);
      return itemDate >= startDate && itemDate <= endDate;
    });
  }

  // 分页
  const startIndex = (pagination.current - 1) * pagination.pageSize;
  const endIndex = startIndex + pagination.pageSize;

  pagination.total = filtered.length;
  return filtered.slice(startIndex, endIndex);
});

// 方法
const filterHistory = () => {
  pagination.current = 1;
};

const handlePageChange = (page: number) => {
  pagination.current = page;
};

const handlePageSizeChange = (current: number, size: number) => {
  pagination.current = 1;
  pagination.pageSize = size;
};

const exportHistory = () => {
  message.success('状态历史导出功能开发中...');
};

const getHistoryColor = (statusType: string) => {
  const colors: Record<string, string> = {
    LIFECYCLE: 'blue',
    AVAILABILITY: 'green',
    VERSION: 'orange',
    CUSTOM: 'purple',
  };
  return colors[statusType] || 'default';
};

const getHistoryTypeLabel = (statusType: string) => {
  const labels: Record<string, string> = {
    LIFECYCLE: '生命周期',
    AVAILABILITY: '可用性',
    VERSION: '版本',
    CUSTOM: '自定义',
  };
  return labels[statusType] || statusType;
};

const formatTime = (timestamp: Date) => {
  return timestamp.toLocaleString('zh-CN');
};

// 初始化
onMounted(() => {
  pagination.total = statusHistory.value.length;
});
</script>

<style lang="less" scoped>
.status-history-panel {
  .history-item {
    .history-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;

      .history-type {
        font-weight: 500;
      }

      .history-time {
        color: #999;
        font-size: 12px;
      }
    }

    .history-content {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
    }

    .history-reason {
      color: #666;
      font-size: 12px;
      margin-bottom: 4px;
    }

    .history-operator {
      color: #999;
      font-size: 12px;
    }
  }

  .pagination-wrapper {
    margin-top: 16px;
    text-align: center;
  }
}
</style>
